import React, { Component } from 'react';

import { category_list } from "../api/index"
import { category_subcate } from "../api/index"

import "../styles/MyList.css"
class MyList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // 一级分类
            list: [],
            currentIndex: 0,
            // 二级分类
            categoryList: [],
            // 三级分类
            listthree:[]
        }
    }
    // 刚进页面发送请求
    componentDidMount() {
        category_list().then((res) => {
            console.log(res);
            this.setState(
                { list: res.data.list }
            )
        })
    }

    // 点击一级目录的时候发送请求
    handleClick(index) {
        this.setState({
            currentIndex: index
        })

        category_subcate({ id: this.state.list[index].id }).then(res => {
            console.log(res.data.subcate.subcategory);
            this.setState({ categoryList: res.data.subcate.subcategory })
        })
    }

    login(item){
        // console.log(item);

        this.setState({
            listthree: item.subNavs
        })
    }



    render() {
        return (
            <div className='mylist'>
                <div className="left">
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <div className={`item ${this.state.currentIndex == index ? "active" : ''}`} onClick={() => { this.handleClick(index) }} >{item.name}</div>
                            )
                        })
                    }

                </div>
                <div className="right">
                    <div className="right_top">
                        {
                            this.state.categoryList.map((item,index) => {
                                return (
                                    <div className="item" key={index} onClick={()=>{this.login(item)}}>
                                        {/* <img src={item.pic} alt="" /> */}
                                        <div className="name">{item.name}</div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="tight_bottom">
                        {
                            this.state.listthree.map((item,index)=>{
                                return(
                                    <div className="ite" key={index}>
                                        <img src={item.pic} alt="" />
                                        <div className="name">{item.name}</div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default MyList;